<template>
    <div class="subject">
        <span>{{ num1 }}</span>
        <span>+</span>
        <span>{{ num2 }}</span>
        <span>=</span>
        <input type="number" v-model="res" />
        <button @click="sendStatus">提交</button>
    </div>
</template>

<script>
import Bus from '@/utils/EventBus';

export default {
    name: 'SubjectItem',
    props: {
        num1: {
            type: Number,
        },
        num2: {
            type: Number,
        },
        result: {
            type: Number,
        },
        index: {
            type: Number,
        }
    },
    data() {
        return {
            res: this.result
        }
    },


    methods: {
        status() {
            if (this.res == this.num1 + this.num2) {
                return '回答正确';
            } else {
                return '回答错误';
            }
        },

        sendStatus() {
            const obj = {
                index: this.index,
                status: this.status(),
            };
            Bus.$emit('statusResult', obj);
            console.log(this.status());
        }
    },


};
</script>

<style scoped>
.subject {
    margin: 5px;
    padding: 5px;
    font-size: 20px;
}

.subject span {
    display: inline-block;
    text-align: center;
    width: 20px;
}

.subject input {
    width: 50px;
    height: 20px;
}
</style>